<template>
  <div class="container">
    <h2 class="title">封禁管理</h2>
    <el-table style="width: 100%" :data="tableData">
      <el-table-column label="封禁日期" prop="createAt">
        <template slot-scope="scope">
          {{ scope.row.createAt | format }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="user.username"> </el-table-column>
      <el-table-column label="操作的管理" prop="banedBy">
        <template slot-scope="scope">
          {{ scope.row.bannedBy | format }}
        </template>
      </el-table-column>
      <el-table-column label="封禁时长" prop="durationDetail">
        <template slot-scope="scope"
          >{{ scope.row.durationDetail | format }}
        </template>
      </el-table-column>
      <el-table-column label="原因" prop="reson">
        <template slot-scope="scope"
          >{{ scope.row.banedBy | format }}
        </template>
      </el-table-column>

      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            @input="handleSearch"
            type="text"
            size="mini"
            placeholder="搜索用户"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isBanned"
            type="success"
            size="mini"
            @click="handleUnban(scope.$index, scope.row)"
            >解封</el-button
          >
          <el-button
            v-else
            size="mini"
            type="danger"
            @click="handleBan(scope.$index, scope.row)"
            >封禁</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-count="page.pages"
      >
      </el-pagination>
    </div>
  </div>
</template>

 

<script>
import banApi from "@/axios/banApi";
import debounceWrapper from "@/commons/debounce";
export default {
  props: ["forumId"],
  data() {
    return {
      tableData: [],
      search: "",
      page: {
        current: 1,
        size: 10,
      },
    };
  },
  filters: {
    format(v) {
      return v || "N/A";
    },
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleBan(index, row) {
      row.forumId = this.forumId
      this.popBanDialog(row);
    },
    handleUnban(index, row) {
        banApi.unban({uid:row.user.userId,forumId:this.forumId})
        .then((r)=>{
          this.$message.success("解禁成功")
          this.reloadData()
        })
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.reloadData();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.reloadData();
    },
    handleSearch: debounceWrapper(
      200,
      function () {
        if (this.search == "") return this.reloadData();
        this.page.current = 1;
        this.doSearch();
      },
      null
    ),
    doSearch() {
      banApi
        .searchUser({
          q: this.search,
          forumId: this.forumId,
          current: this.page.current,
          size: this.page.size,
        })
        .then(({ data }) => {
          this.tableData = data.data.records;
          this.tableData.forEach(e=>{
            e.isBanned = e.id? true: false;
          })
          console.log(this.tableData);
          this.page.total = parseInt(data.data.total);
          this.page.pages = parseInt(data.data.pages);
        });
    },
    reloadData() {
      if (this.search.length > 0) {
        this.doSearch();
      } else {
        this.fetchBanList();
      }
    },
    fetchBanList() {
      banApi
        .getBanPage({ forumId: this.forumId, ...this.page })
        .then(({ data }) => {
          this.tableData = data.data.records;
          this.tableData.forEach(e=>{
            e.isBanned = e.id? true: false;
          })
          this.page.total = parseInt(data.data.total);
          this.page.pages = parseInt(data.data.pages);
        });
    },
  },
  created() {
    this.fetchBanList();
  },
};
</script>

<style scoped lang="less">
.container {
  h2 {
    font-weight: 400;
    color: var(--text-regular);
    margin-bottom: 40px;
  }
}
</style>